<template>
  <el-drawer
    append-to-body
    destroy-on-close
    :size="size"
    :title="title"
    :visible.sync="drawer"
    @close="close"
  >
    <div v-if="drawer">
      <div class="tips">
        <div class="name">{{ form.room_address }}</div>
        <div class="btns">
          <el-button type="primary" @click="checkIn">办理入住</el-button>
          <el-button @click="deleteBook">退 定</el-button>
        </div>
      </div>
      <div class="roomDetail">
        <div class="titleBox">
          <div class="title">
            <div class="titleName">预定信息</div>
            <el-button class="edit" type="text" @click="bookEdit">
              编辑
            </el-button>
          </div>
        </div>
        <div class="detail">
          <div class="textForm">
            <div class="label">
              <div class="name">姓名</div>
              <div class="value">
                {{ form.customer_name }}
              </div>
            </div>
            <div class="label">
              <div class="name">证件号</div>
              <div
                v-if="
                  form.customer_idcard == null || form.customer_idcard == ''
                "
                class="value"
              >
                --
              </div>
              <div v-else class="value">
                {{ form.customer_idcard }}
              </div>
            </div>
            <div class="label">
              <div class="name">联系方式</div>
              <div class="value">
                {{ form.customer_mobile }}
              </div>
            </div>
            <div class="label">
              <div class="name">预定周期</div>
              <div class="value">
                {{ form.start_date }}至{{ form.end_date }}
              </div>
            </div>
          </div>
        </div>
        <div class="titleBox">
          <div class="title">
            <div class="titleName">备注</div>
            <el-button class="edit" type="text" @click="bookDesc">
              编辑
            </el-button>
          </div>
        </div>
        <div class="detail">
          <div v-if="form.rent_remark == ''" class="empty">暂无备注</div>
          <div v-else class="text">
            {{ form.rent_remark }}
          </div>
        </div>
      </div>
    </div>
    <book-edit ref="bookEdit" @fetch-data="updateDetail" />
    <book-desc ref="bookDesc" @fetch-data="updateDesc" />
  </el-drawer>
</template>

<script>
import { deleteBook } from '@/api/rent'
import { mapActions } from 'vuex'
import bookEdit from './components/bookEdit'
import bookDesc from './components/bookDesc'
export default {
  name: 'BookDetail',
  components: { bookEdit, bookDesc },
  data() {
    return {
      form: {},
      size: 560,
      title: '预定信息',
      drawer: false,
    }
  },
  methods: {
    ...mapActions({
      customer_name: 'rent/setName',
      customer_idcard: 'rent/setIdcard',
      customer_mobile: 'rent/setMobile',
      start_date: 'rent/setStart',
      end_date: 'rent/setEnd',
      rent_sn: 'rent/setSn',
    }),
    showEdit(row) {
      this.form = row
      this.drawer = true
    },
    updateDetail(row) {
      this.form = row
      this.$emit('update-book')
    },
    updateDesc(row) {
      this.form.rent_remark = row
      this.$emit('update-book')
    },
    bookEdit() {
      this.$refs['bookEdit'].showEdit(this.form)
    },
    bookDesc() {
      this.$refs['bookDesc'].showEdit(this.form)
    },
    close() {
      this.form = this.$options.data().form
      this.drawer = false
    },
    checkIn() {
      this.customer_name(this.form.customer_name)
      this.customer_idcard(this.form.customer_idcard)
      this.customer_mobile(this.form.customer_mobile)
      this.start_date(this.form.start_date)
      this.end_date(this.form.end_date)
      this.rent_sn(this.form.rent_sn)
      this.$router.push({
        path: '/customer/checkIn',
        query: { id: this.form.room_id },
      })
    },
    deleteBook() {
      this.$baseConfirm('确定取消预定？', null, async () => {
        const { data } = await deleteBook({ rent_sn: this.form.rent_sn })
        if (data.is_success) {
          this.$baseMessage('退定成功', 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.roomDetail {
  padding: 10px 20px;
}
.tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f7ff;
  padding: 16px;
  .name {
    font-size: 16px;
    color: #000;
    font-weight: bolder;
  }
}
.titleBox {
  display: flex;
  justify-content: space-between;
  height: 32px;
  margin: 10px 0;
  .title {
    display: flex;
    padding-left: 16px;
    line-height: 32px;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 20px;
      background: #6898fc;
      top: 6px;
      left: 0;
      border-radius: 2px;
    }
    .titleName {
      font-size: 16px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.85);
    }
    .edit {
      color: #f5961e;
      margin-left: 16px;
    }
  }
}
.detail {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 12px;
  .textForm {
    display: flex;
    flex-wrap: wrap;
    .label {
      width: 50%;
      display: flex;
      height: 32px;
      line-height: 32px;
      .name {
        width: 70px;
        text-align: right;
        color: #666;
      }
      .value {
        margin-left: 10px;
        flex: 1;
        color: #3f3f3f;
      }
    }
  }
  .empty {
    color: #999;
  }
}
</style>
